<template>
    <header class="flex items-center justify-between  bg-gray-100 ">
        <a href="#" class="px-1 lg:px-0 font-weight-bolder capitalize">
            <img :src="$store.state.system.logo" alt="" style="width:300px;height:150px;">
        </a>

        <ul class="inline-flex items-center">
            <li :class="{active:$route.path==='/'}" class="mx-4">
                <router-link :to="{path:'/'}">
                    <a href="#" class="text-green-800 text-md  hover:text-green-600 shadow-md">
                        首页 </a>
                </router-link>
            </li>
            <li :class="{active:$route.path==='/house/list'}" class="mx-4">
                <router-link :to="{path:'/house/list'}">
                    <a href="#" class=" text-md  hover:text-green-600 shadow-md"

                    > 房屋租售 </a>
                </router-link>
            </li>
            <li :class="{active:$route.path==='/used/list'}" class="mx-4">
                <router-link :to="{path:'/used/list'}">
                    <a href="#" class=" text-md  hover:text-green-600 shadow-md"

                    >二手转让</a>
                </router-link>
            </li>
            <li :class="{active:$route.path==='/car/list'}" class="mx-4">
                <router-link :to="{path:'/car/list'}">
                    <a href="#" class="  text-md  hover:text-green-600 shadow-md"

                    > 汽车买卖 </a>
                </router-link>
            </li>
            <li :class="{active:$route.path==='/pet/list'}" class="mx-4">
                <router-link :to="{path:'/pet/list'}">
                    <a href="#" class=" text-md  hover:text-green-600 shadow-md"

                    > 宠物 </a>
                </router-link>
            </li>
            <li class="px-2 md:px-4 hidden md:block mx-4 font-semibold text-md" v-if="$store.state.user.name"
                :class="{active:$route.path==='/pet/list'}">
                <el-dropdown @command="handleCommand">
                    <a href="#" class="   hover:text-green-600"> 用户：{{
                            $store.state.user.name
                        }} </a>
                    <el-dropdown-menu slot="dropdown">
                        <router-link :to="{path:'/auth/profile'}">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                        </router-link>

                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

            </li>
            <li class="px-2 md:px-4 hidden md:block mx-4 font-semibold text-md" v-else>
                <a href="/auth/login" class="  hover:text-green-600"> 用户登录 </a>
            </li>
        </ul>
        <div class="relative -left-40 mx-4 lg:mx-0 py-3">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                <svg class="w-5 h-5 " viewBox="0 0 24 24" fill="none">
                    <path
                        d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
                        stroke="currentColor" stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"></path>
                </svg>
            </span>
            <input
                class="w-32 p-2 border pl-10 pr-4 text-indigo-600 border-gray-200 rounded-md sm:w-64 focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500"
                type="text"
                placeholder="搜索">
            <router-link :to="{path:'/auth/publish',meta:{auth:true}}">
                <el-button type="success ml-2">发布信息</el-button>
            </router-link>


        </div>

    </header>

</template>

<script>
export default {
    methods: {
        data() {
            return {
                active: ''
            }
        },
        async handleCommand(command) {
            await this.axios.post(command)
            localStorage.removeItem('user-token');
            location.href = '/';
        }
    }
}
</script>

<style scoped>
.active {
    font-size: 1.5rem;
    border-style: solid;
    border-bottom-width: 2px;
    border-color: rgba(131, 24, 67, .9);
}


</style>
